<template>
    <div class="tabs">
        <el-tag class="tag" v-for="(item,index) in tags" :key="item.label" :effect='$route.name === item.name ? "dark" : "plain" ' 
        :closable="item.name !=='home'" @click="changeMenu(item)" @close="handleClose(item,index)">
            {{ item.label }}
            <el-tag v-if="false">{{ index }}</el-tag>
        </el-tag>
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
export default {
    name: 'CommonTag',
    data() {
        return {}
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabList
        })
    },
    methods:{
        ...mapMutations(['closeTag']),
        //点击跳转
        changeMenu(item){
           this.$router.push({name:item.name})
        },
        //点击tag删除
        handleClose(item,index){
            //调用store中的Mutations
            this.closeTag(item)
           const length=this.tags.length
           //删除之后的跳转逻辑
           if(item.name!==this.$route.name){
            return
           }
           if(index===length){
            this.$router.push({
                name:this.tags[index-1].name
            })
           }
           else{
            this.$router.push({
                name:this.tags[index].name
            })
           }
        }
    }
}
</script>

<style lang="less" scoped>
.tabs {
    margin-top: 10px;
    .tag{
        margin-left: 17px;
    }
}
</style>